<template>
  <div class="up-panel-container" data-v-51976f94 data-v-66bd1e0b>
    <!---->
    <div class="up-info-container" data-v-13b082da data-v-51976f94>
      <div class="up-info--left" data-v-13b082da>
        <div class="up-avatar-wrap" data-v-1a81d392 data-v-13b082da>
          <a :href="userUrl+userInfo.user.userId" target="_blank" class="up-avatar" data-v-1a81d392>
            <div
              class="bili-avatar"
              style="width: 48px;height:48px;transform: translate(0px, 0px);"
            >
              <img
                class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                :data-src="userInfo.user.userAvatar"
                alt
                :src="userInfo.user.userAvatar"
              />

              <span
                class="bili-avatar-icon bili-avatar-right-icon bili-avatar-icon-personal bili-avatar-size-48"
              ></span>
            </div>
          </a>
        </div>
      </div>
      <div class="up-info--right" data-v-13b082da>
        <div class="up-info__detail" data-v-13b082da>
          <div class="up-detail" data-v-079d0296 data-v-13b082da>
            <div class="up-detail-top" data-v-079d0296>
              <!---->
              <a
                :href="userUrl+userInfo.user.userId"
                target="_blank"
                class="up-name"
                style="color: var(--text1);"
                data-v-079d0296
              >
                {{userInfo.user.userName}}
                <span class="mask" data-v-079d0296></span>
              </a>
              <a
                href="//message.bilibili.com/#whisper/mid77557766"
                target="_blank"
                class="send-msg"
                data-v-079d0296
              >
                <i class="van-icon-videodetails_messag" data-v-079d0296></i>
                发消息
              </a>
            </div>
            <div
              :title="userInfo.user.userSign"
              class="up-description up-detail-bottom"
              data-v-079d0296
            >{{userInfo.user.userSign}}</div>
          </div>
        </div>
      </div>
     
      <div v-if="this.userInfo.subscribe.follow==='0' || this.userInfo.subscribe.follow==='2'">
        <el-button @click="guanzhu()" class="guanzhu-btn">+ 关注</el-button>
      </div>
      <div v-if="this.userInfo.subscribe.follow==='1' || this.userInfo.subscribe.follow==='3'">
        <el-tooltip class="item" effect="dark" content="当前已关注该用户，点击即可取消关注！" placement="top">
          <el-button @click="cancelguanzhu()" class="cancel-btn">取消关注</el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "up",
  props: ["userInfo"],
  data() {
    return {
      user: this.userInfo,
      userUrl:"/person/zhuye/",
    };
  },
  watch: {
    userInfo(val) {
      this.user = val.user;
    }
  },
  created() {},

  methods: {
    getRelateation() {
 
      this.axios({
        method: "get",
        params: {
          upId: this.userInfo.user.userId
        },
        url: "http://localhost:8097/subscribe/getSubscribeByUpId"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据

          this.userInfo.subscribe = res.data;
        })
        .catch(error => {
          console.log(
            "error in up.getRelateation",
            error.response.data.message
          );
        });

      console.log("this.userInfo", this.userInfo);
    },
    guanzhu() {
      this.axios({
        method: "post",
        params: {
          upId: this.userInfo.user.userId
        },
        url: "http://localhost:8097/subscribe/saveSubscribe"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          // res.data;
          this.getRelateation();
          this.$message.success("关注成功");
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    },

    cancelguanzhu() {

    
      this.axios({
        method: "post",
        params: {
          upId: this.userInfo.user.userId
        },
        url: "http://localhost:8097/subscribe/cancelSubscribe"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
         this.getRelateation();
          this.$message.success("已取消关注");
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    }
  }
};
</script>
<style   scoped>
@import "//s1.hdslb.com/bfs/static/jinkela/long/laputa-css/light.css";
@import "//s1.hdslb.com/bfs/static/jinkela/long/laputa-css/map.css";
@import "//s1.hdslb.com/bfs/static/jinkela/long/laputa-css/light_u.css";

.guanzhu-btn {
  background-color: skyblue;
  color: white;
}
.cancel-btn {
  background-color: white;
  color: skyblue;
}
</style>